<template>
  <!-- NOTE 引入组件，isShow设置成true -->
  <ContentModal :ssml="ssml" v-if="isShow" @onSave="onSave"/>
  <div id="test">
    <!-- <h3>获取音色资源</h3>
      <input placeholder="输入Token" v-model="Token">
      <button class="digital-button" @click="saveToken()">保存Token</button>
    <br>
    <template v-if="hasSaveToken">
      <button class="digital-button" @click="queryVoiceList()">请求音色资源</button>
    </template>
    <template v-if="!hasSaveToken">
      <p>请先保存Token</p>
    </template> -->
 
    <!-- <h3>编辑器</h3>
    <template v-if="pickMusicList?.length"> -->
      <button class="digital-button" @click="openDialog()">点击打开编辑弹窗</button>
    <!-- </template> -->
    <!-- <template v-if="!pickMusicList?.length">
      <p>请先请求音色资源</p>
    </template> -->
    
    <!-- <h3>转语音</h3>
    <template v-if="hasSaveToken && musicConfig">
      <button class="digital-button" @click="transVoice()">转语音</button>
    </template>
    <template v-if="hasSaveToken && musicConfig && taskId">
      <button class="digital-button" @click="queryYUANAudio()">查音频</button>
    </template>
    <template v-if="!hasSaveToken || !musicConfig">
      <p>请先保存Token、编辑SSML</p>
    </template>
    <audio id="audio" controls autoplay></audio> -->
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import ContentModal from './components/ContentModal.vue'
// import { fetchEventSource } from '@microsoft/fetch-event-source';
// type messageType = {
//   data: string;
//   event: string;
//   id: string;
// };


const testSSML = ``;
// const base = 'https://aigc-dev.zegonetwork.com/api/customer';
@Options({
  components: {
    ContentModal,
  },
  // mounted() {
    // const token = localStorage.getItem('Token');
    // if(token) {
    //   this.Token = token;
    //   this.hasSaveToken = true
    // }
  // },
  data() {
    return {
      isShow: false,
      ssml: testSSML,
      // custom_ssml: '',
      // Token: '',
      // hasSaveToken: false,
      pickMusicList: window.voiceList, // 音色列表
      musicConfig: null, // 当前音色的设置
      pickMusic: null, // 当前选择的音色对象
      // _url: null,
      // taskId: '', //转元语音
    }
  },
  methods: {
    openDialog() {
      this.isShow = true;
    },
    onSave(e: { ssml: string, custom_ssml: string, musicConfig: any, pickMusic: any }) {
      this.isShow = false;
      console.log('save', e);
      this.ssml = e.ssml;
      // this.custom_ssml = e.custom_ssml;
      this.musicConfig = e.musicConfig;
      this.pickMusic = e.pickMusic;
    },

    // NOTE 测试API
    // saveToken() {
    //   if(!this.Token) {
    //     this.hasSaveToken = false;
    //     localStorage.setItem('Token', '');
    //   }else {
    //     localStorage.setItem('Token', this.Token);
    //     this.hasSaveToken = true
    //   }
      
    // },
    // NOTE 请求音色接口
    // queryVoiceList() {
    //   if(!this.Token) return
    //   fetch(`${base}/voice/get-list-by-scene/batch`, 
    //     {
    //       method: 'POST',
    //       headers: {
    //         "Token": this.Token,
    //       },
    //       body: JSON.stringify({
    //           "sceneId": [
    //               "a68e9ef9-0a8b-4a04-be16-7c1721adbf3a"
    //           ]
    //       })
    //     }).then(rsp=> rsp.json()).then(rsp=> {
    //       window.voiceList = rsp.data.list[0].voiceList.map((item: any)=> {
    //           const { origin, title, languageList, voice, id} = item;
    //           const imgUri = item.store.full;
    //           return {
    //               imgUri, origin, title, languageList, voice, voiceId: id
    //           };
    //       }).filter((item: any)=> {
    //           return item.origin !== 1; // 自研目前没做，筛掉
    //       });
    //       this.pickMusicList = window.voiceList;
    //       console.log('[voiceList]', this.pickMusicList);
    //     })
    // },
    // NOTE 转语音接口
    // 1、元分身 origin:3 转语音用https://aigc-dev.zegonetwork.com/api/customer/tts/async；需要轮询查一个音频地址
    // 2、阿里云 origin:2 转语音用https://aigc-dev.zegonetwork.com/api/customer/tts/sync；直接返回音频的buffer数据，转blob播放
    // async transVoice() {
    //   const { origin, voice, voiceId } = this.pickMusic;
    //   const { pitchRate, speechRate, volume } = this.musicConfig;
    //   const sampleRate = 16000;
    //   console.log({ origin, voice, voiceId }, { pitchRate, speechRate, volume });
    //   let path = '', 
    //       params = {};
    //   if(origin === 2) { // 阿里云
    //     path = '/tts/sync';
    //     params = {
    //       voice,
    //       volume, 
    //       // text: this.custom_ssml,
    //       text: this.ssml,
    //       speechRate,
    //       pitchRate,
    //       sampleRate
    //     }
    //     this.postAliVoice(path, params);
    //   }else if(origin === 3) { // 元分身
    //     path = '/tts/async';
    //     params = {
    //       voice,
    //       volume, 
    //       text: this.custom_ssml,
    //       speechRate,
    //       pitchRate,
    //       sampleRate,
    //       voiceId,
    //       textType: 2 // 元分身
    //     }
    //     this.postYUANVoice(path, params);
    //   }

    // },
    // 阿里是直接返回流数据，需要用MediaSource接收转化
    // async postAliVoice(path: string, params: any) {
    //   let isDone = false; // 是否传输结束
    //   let isReady = true; // 是否准备好下一次加载
    //   let bufferList: any[] = []; // 缓冲区数组

    //   const mediaSource = new MediaSource();
    //   const _url = window.URL.createObjectURL(mediaSource);
    //   const audioElement:HTMLAudioElement = document.getElementById('audio') as HTMLAudioElement;
    //   audioElement.src = _url;
    //   const ctrl = new AbortController();
    //   const sourceNode: AudioBufferSourceNode | null = null;
    //   let sourceBuffer: any;
    //   const createSourceBuffer = async () => {
    //     try {
    //       sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
    //     } catch (error) {
    //       // console.error(error);
    //     }
        
    //     // 传输完毕事件监听器
    //     sourceBuffer.addEventListener('updateend', () => {
    //       if (audioElement?.paused) { 
    //         audioElement?.play()
    //       }
    //       if (bufferList.length !== 0) {
    //         // 读取完毕后缓冲区有数据，从缓冲区读取
    //         try {
    //           sourceBuffer.appendBuffer(bufferList.shift()!);
    //         } catch (error) {
    //           // console.error(error);
    //         }
            
    //       } else {
    //         // 触发暂停
    //         // console.warn('触发暂停');
    //         // if (audioElement?.paused) {
    //         //   audioElement?.pause()
    //         // } else {
    //         //   audioElement?.play()
    //         // }
    //         if (!isDone) {
    //           isReady = true; // 准备好进行下一次传输
    //         } else if (bufferList.length === 0) {
    //           // 关流，确保audio事件能监听到
    //           try {
    //             mediaSource.endOfStream();
    //           } catch (error) {
    //             //
    //           }
              
    //         }
    //       }
    //     })
    //   }
    //   // 检测是否为open状态，否则添加监听器，等到open状态就绪后再传输
    //   if (mediaSource.readyState === 'open') {
    //     createSourceBuffer();
    //   } else {
    //     mediaSource.addEventListener('sourceopen', () => {
    //       createSourceBuffer();
    //     });
    //   }
    //   const _base64ToArrayBuffer = (base64: string)=> {
    //     const binary_string = window.atob(base64);
    //     const len = binary_string.length;
    //     const bytes = new Uint8Array(len);
    //     for (let i = 0; i < len; i++) {
    //       bytes[i] = binary_string.charCodeAt(i);
    //     }
    //     return bytes.buffer;
    //   };
    //   // 发送请求并开始传输
    //   const eventSourceFn = fetchEventSource(`${base}${path}`, {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json;charset=UTF-8',
    //       "Token": this.Token,
    //     },
    //     body: JSON.stringify(params),
    //     signal: ctrl.signal,
    //     onmessage(event: messageType) {
    //       console.log(`output-event`, event)
    //       // 所以数据请求完的标识
    //       if (event.event === 'ttsSyncUploaded') {
    //         console.log('音频数据接收完成了...')
    //         ctrl.abort();
    //         sourceBuffer.abort()
    //         isDone = true
    //         // 关流，确保audio事件能监听到
    //         mediaSource.endOfStream();
    //         return false;
    //       } else if (event.event === 'ttsSyncResult') {
    //         const base64Data = JSON.parse(event.data);
    //         if (sourceNode === null && base64Data.content) {
    //           const buffer = _base64ToArrayBuffer(base64Data.content)
    //           const blob = new Blob([buffer], { type: 'audio/mpeg' });
    //           blob.arrayBuffer()
    //             .then(buf => {
    //               bufferList.push(buf)
    //               if (isReady) {
    //                 isReady = false;
    //                 // getFetchPlay(false)
    //                 // 如果已准备好则直接读取
    //                 try {
    //                   sourceBuffer && sourceBuffer.appendBuffer(bufferList.shift()!);
    //                 } catch (error) {
    //                   console.error(error);
    //                 }
                    
    //               }
    //             })
    //         }
    //       } else if (event.event === 'ttsSyncFailed') {
    //         const mediaData = JSON.parse(event.data).content;
    //         // errorback(mediaData)
    //         console.error('[ttsSyncFailed]', mediaData);
    //       }
    //     },
    //     // 响应拦截判断接收的数据类型做相应处理
    //     async onopen(response) {
    //       const contentType = response.headers.get('content-type');
    //       if (contentType === 'text/event-stream') {
    //         return;
    //       } else {
    //         const text = await response.text();
    //         const content = JSON.parse(text);
    //         if (content?.code !== 0) {
    //           // isError = true;
    //           // errorback(content.message);
    //           console.error('[onopen]', content.message);
    //           return;
    //         } else {
    //           return;
    //         }
    //       }
    //     },

    //     onerror(err) {
    //       // console.error(err)
    //       console.error(`output2->err`, err)
    //       ctrl.abort();
    //       // if (!isError) errorback('服务器繁忙，请重试');
    //       // eventSourceFn?.close()
    //     },
    //   });
      
    // },
    // postYUANVoice(path: string, params: any) {
    //   fetch(`${base}${path}`, {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json;charset=UTF-8',
    //       "Token": this.Token,
    //     },
    //     body: JSON.stringify(params),
    //   }).then(rsp=> rsp.json()).then(rsp=> {
    //     this.taskId = rsp?.data?.taskId;
        
    //   });
    // },
    // queryYUANAudio() {
    //   const path = '/tts/result'
    //   fetch(`${base}${path}`, {
    //       method: 'POST',
    //       headers: {
    //         'Content-Type': 'application/json;charset=UTF-8',
    //         "Token": this.Token,
    //       },
    //       body: JSON.stringify({taskId: this.taskId}),
    //     }).then(rsp=> rsp.json()).then(rsp=> {
    //       this._url = rsp.data.store.full;
    //       const audioElement:HTMLAudioElement = document.getElementById('audio') as HTMLAudioElement;
    //       audioElement.src = this._url;
    //     });
    // }
  },
})
export default class App extends Vue {}
</script>

<style>
#test {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin: 60px 24px;
}
#test h3 {
  margin:48px 16px 16px
}
input{
  width: 300px;
  border: 1px solid #ccc;
  height: 36px;
  line-height: 36px;
  margin: 0 12px 12px;
  padding: 6px;
}
</style>
